<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #eee;
        }
        .wrap{
            width: 1223px;
            height: 620px;
            margin: 0 auto;
            background-color: #eee;
            overflow: hidden;
            /* margin-right: -20px; */
        }
        .box1{
            float: left;
            width: 234px;
            height: 614px;
            cursor: pointer;
            background-color: white;
            border: 1px solid #eee;
            margin-right: 5px;
        }
        .box2{
            float: left;
            width: 234px;
            height: 300px;
            cursor: pointer;
            background-color: white;
            border: 1px solid #eee;
            margin: 0px 5px 10px 5px;
            
        }
        .a{
            float: left;
            width: 234px;
            height: 145px;
            cursor: pointer;
            background-color: white;
            border: 1px solid #eee;
            margin: 0px 5px 10px;
        }
        .b{
            float: left;
            width: 234px;
            height: 145px;
            cursor: pointer;
            background-color: white;
            border: 1px solid #eee;
            margin: 0px 5px 5px;
        }
        .box1 h2{
            font-size: 30px;
            margin: 100px 10px 20px 20px;
        }
        .box1 p{
            font-size: 20px;
            margin-left: 20px;
        }
        .box1 img{
            margin-top: 10px;
            width: 234px;
            height: 234px;
        }
        .box2 img{
            margin: 0px 30px;
            width: 160px;
            height: 160px;
        }
        .box2 h3{
            text-align: center;
        }
        .box2 p{
            text-align: center;
            color: skyblue;
        }
        .a p{
            font-size: 15px;
            margin: 25px 15px;
        }
        .a img{
            float: right;
            width: 80px;
            height: 80px;
            margin-top: -95px ;
            margin-right: 25px;
        }
        .b h2{
            margin-top: 50px;
            font-size: 30px;
            text-align: center;
        }
        #shadow:hover{
            box-shadow:
                2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
                6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
                12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
                22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
                41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
                100px 100px 80px rgba(0, 0, 0, 0.07);               
        }
    </style>
</head>
<body>
    <div class="wrap">
    <div class="box1" id="shadow">
        <h2>Redmi G Pro 锐龙版 R7</h2>
        <p>全速进化 再站一场</p>
        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/FAA70383C7422D9E0E5B0E4D27916D94.png" alt="" >
    </div>
    <div class="box2" id="shadow">
        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/FAA70383C7422D9E0E5B0E4D27916D94.png" alt="">
        <h3>Redmi G 游戏本 2022</h3>
        <p>16英寸 2.5k 165Hz 电竞大屏</p>
        <p style="color: orange; text-align: center;">7499起</p>
    </div>
    <div class="box2" id="shadow">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/63532c3fce30e7beb763d804d6a40f75.jpg?thumb=1&w=350&h=350&f=webp&q=90" alt="">
        <h3>小米笔记本Pro X 14</h3>
        <p>16英寸 2.5k 165Hz 电竞大屏</p>
        <p style="color: orange; display: inline; margin-left: 70px;">6999起</p>
        <span style="color: skyblue;"><del>7999起</del></span>
        
    </div>
    <div class="box2" id="shadow">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e3c300330221ad788569e4fb1e6f932f.jpg?thumb=1&w=350&h=350&f=webp&q=90" alt="">
        <h3>Redmi G 游戏本 2022</h3>
        <p>高能旗舰 轻薄力作</p>
        <p style="color: orange; text-align: center;">5399起</p>
    </div>
    <div class="box2" id="shadow">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0f8abb2bc3947c4679e3f1b2aafc28c0.jpg?thumb=1&w=350&h=350&f=webp&q=90" alt="">
        <h3>RedmiBook Pro15 2022</h3>
        <p>全新锐龙7 6800HX处理器 3.2k</p>
        <p style="color: orange; text-align: center;">5499起</p>
    </div>
    <div class="box2" id="shadow">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210261040_b679a0f353b618fc79a8b7ea930a19a1.png?thumb=1&w=350&h=350&f=webp&q=90" alt="">
        <h3>Redmi Pad</h3>
        <p>入门级,屏幕/外观/系统三大升级</p>
        <p style="color: orange; display: inline; margin-left: 70px;">1169起</p>
        <span style="color: skyblue;"><del>1299起</del></span>
    </div>
    <div class="box2"id="shadow">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ed0541d2337dc4fff6e52c2b7f162fe5.jpg?thumb=1&w=350&h=350&f=webp&q=90" alt="">
        <h3>小米平板5 Pro</h3>
        <p>骁龙870芯片|2.5k超高清|120HZ</p>
        <p style="color: orange; display: inline; margin-left: 70px;">2199起</p>
        <span style="color: skyblue;"><del>2499起</del></span>
    </div>
    <div class="box2" id="shadow">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101822_61eaf5f69fdc3e6c2fa0eb570e091d4d.png?thumb=1&w=350&h=350&f=webp&q=90" alt="">
        <h3>小米平板5 Pro 12.4</h3>
        <p>12.4英寸超清大屏|MIUI 大屏爽</p>
        <p style="color: orange; display: inline; margin-left: 70px;">2699起</p>
        <span style="color: skyblue;"><del>2999起</del></span>
    </div>
        <div class="a" id="shadow">
            <p>小米平板5</p>
            <p style="color: orange;">1799起</p>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg?thumb=1&w=175&h=175&f=webp&q=90" alt="">
        </div>
        <div class="b" id="shadow">
            <h2>浏览更多</h2>
        </div>
    </div>
</body>
</html>